<template>
	<view class="container">
		<view class="bg-colore"></view>
		<view class="content">
			<view class="navbar">
				<view v-for="(item, index) in navList" :key="index" class="nav-item"
					:class="{current: tabCurrentIndex === index}" @click="tabClick(index)">
					{{item.text}}
				</view>
			</view>
			<view class="juan-div wrap">
				<view class="list" :class="item.overNum>=item.number?'no':''" v-for="(item,index) in juanData" :key="index">
					<view class="left">
						<text v-if="item.typeId==1">{{item.money}}<text class="small">折</text> </text>
						<text v-else><text class="small">￥</text>{{item.money}}</text>
					</view>
					<view class="xian">
						<view class="shang">

						</view>
						<view class="zhong">
							<view class="zhongxian">

							</view>
						</view>
						<view class="xia">

						</view>
					</view>
					<view class="right">
						<view class="title">
							{{item.bak2?item.bak2:'优惠劵'}}
						</view>
						<view class="time">
							{{item.startTime.split(' ')[0]}}—{{item.endTime.split(' ')[0]}}生效
						</view>
						<view class="btn">
							<view class="btncss no" v-if="item.status==2">
								已过期
							</view>
							<view class="btncss no" v-else-if="item.status==1">
								已使用
							</view>
							<view class="btncss" v-else @click="$public.navto('/pages/daPai/daPai')">
								去使用
							</view>
						</view>
					</view>
				</view>
			</view>

		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				juanData: [],
				navList: [{
						state: 0,
						text: '待使用',
						loadingType: 'more',
						orderList: []
					},
					{
						state: 1,
						text: '已使用',
						loadingType: 'more',
						orderList: []
					},
					{
						state: 2,
						text: '已过期',
						loadingType: 'more',
						orderList: []
					},
				],
				tabCurrentIndex: 0,
				allData: []
			};
		},
		onLoad() {
			this.getCoupon()
		},
		methods: {
			getCoupon() {
				let that = this
				this.$public.htmlPost("/api/getCoupon").then((res) => {
					console.log("getCoupon res", res)
					let data = res.data;
					if (data.code == 0) {
						// that.juanData = data.data
						data.data.forEach(item => {
							that.allData.push(item)
							if (item.status == 0)
								that.juanData.push(item)
						})
					}
					uni.hideLoading();
				})
			},
			tabClick(index) {
				this.tabCurrentIndex = index
				let that = this
				let state = this.navList[index].state
				this.juanData = []
				this.allData.forEach(item => {
					if (item.status == state)
						that.juanData.push(item)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.wrap {
		padding: $uni-wrap-padding;
	}

	.navbar {
		display: flex;
		height: 40px;
		padding: 0 5px;
		background: #fff;
		box-shadow: 0 1px 1px rgba(0, 0, 0, .06);
		position: relative;
		z-index: 10;

		.nav-item {
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			font-size: 15px;
			color: $font-color-dark;
			position: relative;

			&.current {
				color: #106cc8;

				&:after {
					content: '';
					position: absolute;
					left: 50%;
					bottom: 0;
					transform: translateX(-50%);
					width: 44px;
					height: 0;
					border-bottom: 2px solid #106cc8;
				}
			}
		}
	}

	.list {
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: #fff;
		margin-top: 30rpx;
		border-radius: 20rpx;
		position: relative;

		.left {
			width: 176rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 70rpx;
			// font-weight: bold;
			color: #DF686A;

			.small {
				font-size: 36rpx;
			}
		}

		.xian {
			width: 40rpx;
			height: 100%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			height: 270rpx;

			.shang {
				background: #f5f5f5;
				width: 40rpx;
				height: 8%;
				border-radius: 0 0 50% 50%;
			}

			.zhong {
				height: 84%;
				display: flex;
				align-items: center;

				.zhongxian {
					border-left: 1rpx dashed #CCCCCC;
					height: 80%;
				}
			}

			.xia {
				background: #f5f5f5;
				width: 40rpx;
				height: 8%;
				border-radius: 50% 50% 0 0;
			}
		}

		.right {
			padding: 40rpx 0;
			width: 510rpx;

			.title {
				font-size: 32rpx;
				color: #333333;
				font-weight: bold;
				text-align: center;
			}

			.time {

				font-size: 26rpx;
				color: #666666;
				padding: 16rpx 0 30rpx;
				text-align: center;
			}

			.btn {
				.btncss {
					background: #DF686A;
					width: 200rpx;
					height: 64rpx;
					margin: 0 auto;
					font-weight: normal;
					font-size: 28rpx;

					&.no {
						background: #CCCCCC;
					}
				}
			}
		}
	}
</style>